<template>
  <section>
    <Card>
      <p slot="title">账号管理</p>
      <div slot="extra">
           <Button type="primary" size="small" @click="showCreateModal">添加账号</Button>
       </div>
       <Modal
            v-model="updateModal"
            title="修改账号">
            <edit-operator ref="create-operator" :operator="currentOperator" :needIdentity="true" ></edit-operator>
            <div slot="footer">
                <Button type="default" size="large" @click="updateModal = false">关闭</Button>
                <Button type="primary" size="large" @click="createUser">确定</Button>
            </div>
       </Modal>
       <Modal
            v-model="ceateModal"
            title="创建账号">
            <edit-operator ref="create-operator" :operator="currentOperator" :needIdentity="true" :need-password="true"></edit-operator>
            <div slot="footer">
                <Button type="default" size="large" @click="ceateModal = false">关闭</Button>
                <Button type="primary" size="large" @click="createUser">确定</Button>
            </div>
        </Modal>
      <Table stripe border :data="list" :columns="columns" />
      <Page
        :current="page"
        :style="pageStyle"
        @on-change="changePage"
        :page-size="10"
        :total="total"
      ></Page>
    </Card>
  </section>
</template>
<script>
import dayjs from 'dayjs';
import EditOperator from './edit-operator'
export default {
  components: {
    EditOperator
  },
  data() {
    return {
      currentOperator: {},
      total: 0,
      page: 1,
      list: [],
      ceateModal: false,
      updateModal: false,
      columns: [
        {
          title: "id",
          width: 300,
          align: "center",
          render: (h, params) => {
            return h("div", params.row.id);
          },
        },
        {
          title: "姓名",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", params.row.name);
          },
        },
        {
          title: "账号",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", params.row.account);
          },
        },
        {
          title: "权限",
          width: 200,
          align: "center",
          render: (h, params) => {
            let temp = {
              "red": "红娘",
              "operate": "运营",
              "admin": "管理员",
              "third": "第三方",
              "editor": "编辑"
            }
            return h("div", temp[params.row.access[0]]);
          },
        },
        {
          title: "是否管理员",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", params.row.access.includes("admin") ? "是" : "否");
          }
        },
        {
          title: "创建时间",
          align: "center",
           width: 300,
          render: (h, params) => {
            let date = dayjs(params.row.create_date).format('YYYY-MM-DD HH:mm:ss');
            return h("div", date);
          }
        },
        {
          title: "操作",
          key: "view",
          width: 200,
          fixed: "right",
          align: "center",
          render: (h, params) => {
            let bar = [];
            bar.push(
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                   style: {
                      marginRight: "10px"
                  },
                  on: {
                    click: () => {
                        this.updateModal = true;
                        delete params.row.password;
                        delete params.row.phone;
                        delete params.row.identity;
                        params.row.identity = "编辑";
                        if(params.row.access.includes("admin")) {
                            params.row.identity = "管理员"
                        }
                        if(params.row.access.includes("red")) {
                            params.row.identity = "红娘"
                        }
                        if(params.row.access.includes("operate")) {
                            params.row.identity = "运营"
                        }
                        if(params.row.access.includes("third")) {
                            params.row.identity = "第三方"
                        }
                        this.currentOperator = params.row;
                    }
                  }
                },
                "操作"
              )
            )
            bar.push(
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                          title: '确定删除?',
                          onOk: () => {
                              this.jsonrpc.backend.users.remove(Object.assign(params.row,{
                                  "is_removed": true
                              })).then(()=>{
                                  this.changePage(this.page)
                              })
                          }
                      })
                    }
                  }
                },
                "删除"
              )
            )
            return h("div", bar);
          },
        }
      ],
      pageStyle: {
        marginTop: "15px",
      },
    }
  },
  methods: {
    showCreateModal() {
      this.ceateModal = true;
      this.currentOperator = {};
    },
    changePage(page) {
      this.jsonrpc.backend.users
        .list({ start: (page - 1) * 10, limit: 10 })
        .then((res) => {
          this.list = res.list;
          this.total = res.total;
          this.page = page;
        });
    },
    createUser() {
        if(this.currentOperator.account && this.currentOperator.name && this.currentOperator.identity) {
            let currentOperator = JSON.parse(JSON.stringify(this.currentOperator));
            currentOperator.access = ["editor"];
            currentOperator.is_admin = false;
            if(this.currentOperator.identity == "管理员") {
                currentOperator.access = ["admin"];
                currentOperator.is_admin = true;
            }
            if(this.currentOperator.identity == "红娘") {
                currentOperator.access = ["red"];
                currentOperator.is_admin = false;
            }
            if(this.currentOperator.identity == "运营") {
                currentOperator.access = ["operate"];
                currentOperator.is_admin = false;
            }
            if(this.currentOperator.identity == "第三方") {
                currentOperator.access = ["third"];
                currentOperator.is_admin = false;
            }
            currentOperator.identity = 0;
            this.jsonrpc.backend.users.save(currentOperator).then(res=> {
                if(this.ceateModal) {
                  this.ceateModal = false;
                  this.$Message.success("添加成功");
                }
                if(this.updateModal) {
                  this.updateModal = false;
                  this.$Message.success("修改成功");
                }
                this.currentOperator = {}; 
                this.changePage(this.page)
            })
        } else {
            this.$message.error("请输入完整的参数信息");
        }
    }
  },
   mounted() {
    this.changePage(1);
  },
}

</script>
<style scoped>
.center {
  text-align: center;
  margin-bottom: 20px;
}
</style>